 /*
 * @description: phone
 * @Author: along
 * @Date: 2020-09-08
 * @Last Modified by: along
 * @Last Modified time: 2020-09-11
 */

<template>
    <div
        class="phone"
        id="phone"
        :style="{background: config.base_config.background_color, marginBottom: bottom < 0 ? 0 : bottom + 'px'}"
    >
        <tab
            :baseconfig="config.base_config"
            @emit="fnShowEdit"
            id="tab"
            :style="{border: type == 0 ? '1px solid #1890FF' : ''}"
        />

        <!-- 编辑选择组件 -->
        <div
            v-if="list.length > 0"
            class="assemblyList"
        >

            <div
                v-for="(option,i) in dataList"
                :key="i"
            >
                <!-- 分享按钮 -->
                <share-button
                    v-if="option.type == 11 && option.style.buttonFixed === 2"
                    :baseconfig="option"
                    @emit="fnShowEdit"
                    :index="i"
                    :id="'single' + i"
                    :class="option.style.buttonFixed === 2 ? 'forbid2' : ''"
                    :style="{border: id == i ? '1px solid #1890FF' : ''}"
                />
            </div>

            <draggable
                v-model="dataList"
                @end="end"
                filter=".forbid"
                animation="150"
            >
                <div
                    v-for="(option,i) in dataList"
                    :key="i"
                    :class="option.type == 11 && option.style.buttonFixed === 2 ? 'forbid assembly' : 'assembly'"
                >
                    <!-- 单列图片 -->
                    <single-column
                        v-if="option.type == 1"
                        :baseconfig="option"
                        :index="i"
                        @emit="fnShowEdit"
                        :id="'single' + i"
                        :style="{border: id == i ? '1px solid #1890FF' : ''}"
                    />
                    <!-- 商品组 -->
                    <cate-shop
                        v-if="option.type == 101"
                        :baseconfig="option"
                        @emit="fnShowEdit"
                        :index="i"
                        :nowid="nowid"
                        :id="'single' + i"
                        :style="{border: id == i ? '1px solid #1890FF' : ''}"
                    />
                    <!-- 轮播图 -->
                    <lunbo
                        v-if="option.type == 3"
                        :baseconfig="option"
                        @emit="fnShowEdit"
                        :index="i"
                        :id="'single' + i"
                        :style="{border: id == i ? '1px solid #1890FF' : ''}"
                    />
                    <!-- 多图拼凑 -->
                    <multi-column
                        v-if="option.type == 2"
                        :baseconfig="option"
                        @emit="fnShowEdit"
                        :index="i"
                        :id="'single' + i"
                        :style="{border: id == i ? '1px solid #1890FF' : ''}"
                    />
                    <!-- 优惠券组件 -->
                    <coupon-list
                        v-if="option.type == 102"
                        :baseconfig="option"
                        @emit="fnShowEdit"
                        :index="i"
                        :id="'single' + i"
                        :style="{border: id == i ? '1px solid #1890FF' : ''}"
                    />
                    <!-- 红包组件 -->
                    <packet-list
                        v-if="option.type == 104"
                        :baseconfig="option"
                        @emit="fnShowEdit"
                        :index="i"
                        :id="'single' + i"
                        :style="{border: id == i ? '1px solid #1890FF' : ''}"
                    />
                    <!-- 自定义商品 -->
                    <custom-shop
                        v-if="option.type == 103"
                        :baseconfig="option"
                        @emit="fnShowEdit"
                        :index="i"
                        :id="'single' + i"
                        :style="{border: id == i ? '1px solid #1890FF' : ''}"
                    />
                    <!-- 社群专享 -->
                    <comminity-shop
                        v-if="option.type == 105"
                        :baseconfig="option"
                        @emit="fnShowEdit"
                        :index="i"
                        :id="'single' + i"
                        :style="{border: id == i ? '1px solid #1890FF' : ''}"
                    />
                    <!-- 辅助空白 -->
                    <blank
                        v-if="option.type == 4"
                        :baseconfig="option"
                        @emit="fnShowEdit"
                        :index="i"
                        :id="'single' + i"
                        :style="{border: id == i ? '1px solid #1890FF' : ''}"
                    />
                    <!-- 辅助线条 -->
                    <aux-line
                        v-if="option.type == 5"
                        :baseconfig="option"
                        @emit="fnShowEdit"
                        :index="i"
                        :id="'single' + i"
                        :style="{border: id == i ? '1px solid #1890FF' : ''}"
                    />
                    <!-- 倒计时组件 -->
                    <count-down
                        v-if="option.type == 6"
                        :baseconfig="option"
                        @emit="fnShowEdit"
                        :index="i"
                        :id="'single' + i"
                        :style="{border: id == i ? '1px solid #1890FF' : ''}"
                    />
                    <!-- 自定义优惠券 -->
                    <custom-coupon-list
                        v-if="option.type == 106"
                        :baseconfig="option"
                        @emit="fnShowEdit"
                        :index="i"
                        :id="'single' + i"
                        :style="{border: id == i ? '1px solid #1890FF' : ''}"
                    />
                    <!-- 自定义优惠券 -->
                    <custom-packet-list
                        v-if="option.type == 107"
                        :baseconfig="option"
                        @emit="fnShowEdit"
                        :index="i"
                        :id="'single' + i"
                        :style="{border: id == i ? '1px solid #1890FF' : ''}"
                    />
                    <!-- 分享按钮 -->
                    <share-button
                        v-if="option.type == 11 && option.style.buttonFixed === 1"
                        :baseconfig="option"
                        @emit="fnShowEdit"
                        :index="i"
                        :id="'single' + i"
                        :class="option.style.buttonFixed === 2 ? 'forbid' : ''"
                        :style="{border: id == i ? '1px solid #1890FF' : ''}"
                    />
                </div>
            </draggable>
        </div>

        <!-- 提示浮层 -->
        <div
            class="phone-dialog"
            :style="{top: type == 0 ? 0 : top + 'px'}"
        >
            {{ type | filterType }}
        </div>

        <!-- 操作浮层 -->
        <div
            class="phone-side"
            :style="{top: top + 'px'}"
            v-if="type !== 0"
        >
            <i
                class="iconfont el-icon-hand-xiangshang1"
                v-if="id > 0 && type !== 11"
                @click="handleUp()"
            />
            <i
                class="iconfont el-icon-hand-xiangxia1"
                v-if="id < list.length - 1 && type !== 11"
                @click="handleDown()"
            />
            <i
                class="iconfont el-icon-hand-shanchu1"
                @click="handleDelete()"
            />
        </div>

        <!-- 无组件 -->
        <div
            v-if="list.length == 0"
            class="phone-view"
        >
            <img
                src="@/assets/image/control-image.png"
                class="phone-view-image"
            >
            <p class="phone-view-desc">您还未添加任何模块</p>
            <p class="phone-view-desc">请点击添加左侧模块到这里开始装修</p>
        </div>
    </div>
</template>

<script>
import draggable from 'vuedraggable';
import tab from '@/components/active/tab.vue';
import singleColumn from '@/components/active/single-column.vue';
import cateShop from '@/components/active/cate.vue';
import lunbo from '@/components/active/lunbo.vue';
import blank from '@/components/active/blank.vue';
import auxLine from '@/components/active/line.vue';
import multiColumn from '@/components/active/multi-column.vue';
import customShop from '@/components/active/custom-shop.vue';
import comminityShop from '@/components/active/comminity-shop.vue';
import couponList from '@/components/active/coupon-list.vue';
import countDown from '@/components/active/count-down.vue';
import packetList from '@/components/active/packet-list.vue';
import customCouponList from '@/components/active/custom-coupon-list.vue';
import customPacketList from '@/components/active/custom-packet-list.vue';
import shareButton from '@/components/active/share-button.vue';
export default {
    name: 'Phone',
    components: {
        draggable,
        tab,
        singleColumn,
        cateShop,
        lunbo,
        blank,
        auxLine,
        multiColumn,
        customShop,
        couponList,
        countDown,
        packetList,
        comminityShop,
        customCouponList,
        customPacketList,
        shareButton
    },
    props: {
        list: {
            type: Array,
            default: () => {}
        },
        config: {
            type: Object,
            default: () => {}
        },
        nowid: {
            type: Number,
            default: () => {}
        },
        bottom: {
            type: Number,
            default: () => {}
        }
    },
    data () {
        return {
            type: 0,//当前选中组件
            top: 0,//浮层相对顶部距离(用于左侧浮层)
            phoneTop: 0,//手机距离顶部距离(用于左侧浮层)
            id: -1,//当前选择组件的位置
            dataList: this.list,//拷贝list数据，避免直接修改父组件数据
            checkButton: false,//查询button组件是否为固定
            shareButtonIndex: 0//分享按钮索引
        };
    },
    filters: {
        filterType (val) {
            if(val == 0) {
                return '页面标题';
            } else if (val == 1) {
                return '单列图片';
            } else if (val == 2) {
                return '多图拼凑';
            } else if (val == 3) {
                return '轮播图';
            } else if(val == 4) {
                return '辅助空白';
            } else if (val == 5) {
                return '辅助线条';
            } else if (val == 101) {
                return '商品组';
            } else if (val == 103) {
                return '自定义商品';
            } else if (val == 102) {
                return '优惠券';
            } else if (val == 6) {
                return '倒计时';
            } else if (val == 104) {
                return '红包';
            } else if (val == 105) {
                return '社群专享商品';
            } else if (val == 106) {
                return '自定义优惠券';
            } else if (val == 107) {
                return '自定义红包';
            } else if (val == 11) {
                return '分享按钮';
            }
        }
    },
    watch: {
        dataList (val) {
            this.$emit('send', this.dataList);
            // console.log('监听数据变化同步给父组件', this.dataList);

            this.checkButton = this.dataList.reduce((cur,next, index) => {
                if(next.type == 11 && next.style.buttonFixed === 2) {
                    this.shareButtonIndex = index;
                    cur.push(next.type);
                }
                return cur;
            }, []).includes(11) ? true : false;

            console.log('checkButton', this.checkButton);
        },
        list (val) {
            this.dataList = this.list;
        },
        type (val) {

            if(!this.checkButton) {
                this.getTop(this.nowid);
            } else {
                console.log('@@@@@@', val);

                if(val == 11) {
                    setTimeout(() => {
                        const H = document.querySelector('.assemblyList').getBoundingClientRect().height;

                        this.$emit('top', {
                            top: H - this.dataList[this.shareButtonIndex]['style']['Top'] + 64 - 100,
                            bottom: 0
                        });
                        console.log('-------', H - this.dataList[this.shareButtonIndex]['style']['Top'] + 64 - 100);
                        this.top = H - this.dataList[this.shareButtonIndex]['style']['Top'] + 64 - 100;
                        this.type = 11;
                    }, 100);
                } else {
                    this.getTop(this.nowid);
                }
            }
        },
        nowid (val) {
            console.log('@@@@@@2', val, this.nowid);
            if(!this.checkButton) {
                // if(val !== 0) {
                //     this.id = val;
                //     this.getTop(this.nowid);
                // } else {
                //     this.$emit('top', {
                //         top: this.dataList[this.shareButtonIndex]['style']['Top'] + 64,
                //         bottom: 0
                //     });
                //     this.top = this.dataList[this.shareButtonIndex]['style']['Top'] + 64;
                //     this.type = 108;
                // }
                this.id = val;
                this.getTop(this.nowid);
            }

            // this.id = val;
            // this.getTop(this.nowid);
            // console.log('nowid', this.nowid);
        }
    },
    methods: {
        /**
         * @description 获取浮层距离顶部距离
         */
        getTop (type) {
            let list = document.querySelectorAll('.assembly');
            let height = [];
            let num = 0;

            for(let key=0; key<list.length; key++) {
                height.push(list[key].getBoundingClientRect().height);
            }

            // if(this.type == 0) {
            //     this.top = 70;
            //     let bottom = 703 + this.top - document.querySelector('.assemblyList').getBoundingClientRect().height;//距离底部距离

            //     this.$emit('top', {
            //         top: 0,
            //         bottom: bottom
            //     });
            // } else {
            // }
            console.log('---height---', height);
            height.forEach((option,i) => {
                if(i < type) {
                    num += option;
                }
            });
            this.top = 90 + num;

            let bottom = 703 + this.top - document.querySelector('.assemblyList').getBoundingClientRect().height;//距离底部距离

            this.$emit('top', {
                top: this.top,
                bottom: bottom
            });

        },

        /**
         * @description 点击组件 展示右侧编辑区域
         */
        fnShowEdit (object) {
            this.type = object.type;
            this.$emit('showEdit', object);

            //设置id，用于定位当前点击位置
            this.id = object.index;
        },

        /**
         * @description 监听拖拽事件
         */
        end (object) {
            this.getTop(object.newIndex);
            this.$emit('addid', object.newIndex);
        },

        /**
         * @description 组件排序 上移
         */
        handleUp () {
            this.dataList.splice(this.nowid - 1, 0, this.dataList[this.nowid]);
            this.dataList.splice(this.nowid + 1, 1);
            this.getTop(this.nowid - 1);
            this.$emit('addid', this.nowid - 1);
        },

        /**
         * @description 组件排序 下移
         */
        handleDown () {
            this.dataList.splice(this.nowid + 2, 0, this.dataList[this.nowid]);
            this.dataList.splice(this.nowid, 1);
            this.getTop(this.nowid + 1);
            this.$emit('addid', this.nowid + 1);
        },

        /**
         * @description 删除当前组件
         */
        handleDelete () {
            this.type = 0;//隐藏控件
            this.dataList.splice(this.id, 1);
            this.$emit('delete', 'delete' + new Date().getTime());

            setTimeout(() => {
                this.fnShowEdit({
                    type: 0,
                    index: -1
                });
            },100);
        }
    }
};
</script>

<style lang="less" scoped>
.phone {
    width: 375px;
    // height: 703px;
    min-height: 703px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(153, 169, 192, 0.2);
    margin-top: 24px;
    position: relative;
    // margin-bottom: 700px;
    .assemblyList {
        width: 375px;
        flex: 1;
        overflow-y: auto;
        position: relative;
        &::-webkit-scrollbar {
            width: 0px;
        }
    }
    //组件
    .assembly {
        width: 375px;
        display: flex;
        flex-direction: column;
        cursor: move;
        position: relative;
        &:hover>div {
            border: 1px #1890FF dashed;
        }
    }
    // 分享按钮
    .forbid2 {
        // width: 325px;
        position: absolute;
        z-index: 100;
        // background-color: red;
    }
    //浮层
    .phone-dialog {
        width: 25px;
        box-sizing: border-box;
        background: #ffffff;
        border-radius: 15px;
        padding: 10px 5px;
        color: #A2A2A2;
        font-size: 12px;
        position: absolute;
        left: -40px;
        z-index: 99;
        margin: 0 auto;
        line-height: 16px;
        text-align: center;
        transition: .2s;
    }
    //操作区
    .phone-side {
        width: 30px;
        background: #ffffff;
        border-radius: 2px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 12px;
        box-sizing: border-box;
        position: absolute;
        right: -45px;
        z-index: 99;
        transition: .2s;
        i {
            color: #333333;
            font-size: 18px;
            margin-bottom: 12px;
        }
    }
    // 无数据
    .phone-view {
        margin-top: 128px;
        width: 375px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .phone-view-image {
            width: 165px;
            height: 201px;
            margin-bottom: 20px;
        }
        .phone-view-desc {
            color: #999999;
            font-size: 12px;
            line-height: 18px;
        }
    }
}
</style>